<template>
    <div>
        <Table tooltip-theme="light" ref="currentRowTable" :columns="columns3" :data="data1" :draggable="true" @on-drag-drop="onDragDrop"></Table>
        <Button @click="handleClearCurrentRow">Clear</Button>
        <h1>Fixed Force: true </h1>
        <Table tooltip-theme="light" ref="currentRowTable" :columns="columns3" :loading="data2Loading" :data="data2" :fixed-force="true"></Table>
        <div style="margin:20px; text-align:right">
        <Button @click="refreshForce" size="large" type="primary">刷新：Fixed Force: true -- {{ time2 }} </Button>
        </div>
        <h1>Fixed Force: false </h1>
        <Table tooltip-theme="light" ref="currentRowTable" :columns="columns3" :loading="data3Loading" :data="data3" :fixed-force="false" maxHeight="300"></Table>
        <div style="margin:20px; text-align:right">
        <Button @click="refresh" size="large" type="success">刷新：Fixed Force: false -- {{ time }}</Button>
        </div>
    </div>
</template>
<script>
import { getRandomStr } from '../../src/components/table/util';
    export default {
        data () {
            return {
                time: 0,
                time2: 0,
                data2Loading: false,
                data3Loading: false,
                columns3: [
                      {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        type: 'index',
                        width: 60,
                        align: 'center',
                        fixed: 'left',
                        indexMethod (row) {
                            return row._index;
                        }
                    },
                    {
                        title: 'Name',
                        key: 'name',
                        width: 200,
                        type:'expand',
                        render(h, param) {
                            return h('span', 'hello');
                        }
                    },
                     {
                        title: 'Name',
                        key: 'name',
                        width: 200,
                        type:'expand',
                        render(h, param) {
                            return h('span', 'world');
                        }
                    },
                     {
                        title: 'Force Cell Render',
                        key: 'name',
                        width: 200,
                        force: true
                    }, {
                        title: 'Name',
                        key: 'name',
                        width: 200,
                          tooltip: true
                    }, {
                        title: 'uN3rHtgHzLQrKdj6fEPE58OQFfbS3PtZ1kSbLHbuzSEAyGT9mRqZcUX6sKxBDhX4RjZqYw6tbHKcL0EUOILcyhWj92gQRvj96TvtplBknbuo8VSuZWDadCfMx2oN7X8x',
                        key: 'name',
                        width: 200,
                          tooltip: true
                    }, {
                        title: 'Name',
                        key: 'name',
                        width: 200
                    }, {
                        title: 'Name',
                        key: 'name',
                        width: 200
                    }, {
                        title: 'Name',
                        key: 'name',
                        width: 200
                    }, {
                        title: 'Name',
                        key: 'name',
                        width: 200
                    }, {
                        title: 'Name',
                        key: 'name',
                        width: 200
                    }, {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    }, {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    }, {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    }, {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    }, {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    },
                    {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    },
                    {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    },
                    {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    },
                    {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    },
                    {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    },
                    {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    },
                    {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    },
                    {
                        title: 'Name',
                        key: 'name',
                         width: 200,
                    },
                    {
                        title: 'Age',
                        key: 'age',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age2',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age3',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age4',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age5',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age6',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age7',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age8',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age9',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age10',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age11',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age12',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age13',
                         width: 200,
                    },
                    {
                        title: 'Age',
                        key: 'age2',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age3',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age4',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age5',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age6',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age7',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age8',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age9',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age10',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age11',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age12',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age13',
                         width: 200,
                    },
                    {
                        title: 'Age',
                        key: 'age2',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age3',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age4',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age5',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age6',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age7',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age8',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age9',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age10',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age11',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age12',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age13',
                         width: 200,
                    },
                    {
                        title: 'Age',
                        key: 'age2',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age3',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age4',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age5',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age6',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age7',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age8',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age9',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age10',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age11',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age12',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age13',
                         width: 200,
                    },
                    {
                        title: 'Age',
                        key: 'age2',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age3',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age4',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age5',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age6',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age7',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age8',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age9',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age10',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age11',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age12',
                         width: 200,
                    },
                     {
                        title: 'Age',
                        key: 'age13',
                         width: 200,
                    }, 
                    {
                        title: 'Address',
                        key: 'address',
                        fixed: 'right',
                         width: 200,
                        tooltip: true
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park自定义渲染列，使用 Vue 的 Render 函',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ],
                data2: [],
                data3: []
            }
        },
        created() {
            
        },
        mounted() {
             
        },
        methods: {
            handleClearCurrentRow () {
                this.$refs.currentRowTable.clearCurrentRow();
            },
            onDragDrop(a,b){
                console.log(a,b);
                this.data1.splice(b,1,...this.data1.splice(a, 1 , this.data1[b]));
            },
            refreshForce() {
                this.data2Loading = true;
                setTimeout(() => {
                    let data2 = [];
                    for(let i = 0; i < 20; i ++) {
                        data2.push({
                            name: getRandomStr() + getRandomStr() + getRandomStr() + getRandomStr(),
                            age: getRandomStr(),
                            age2: getRandomStr(),
                            age3: getRandomStr(),
                            age4: getRandomStr(),
                            age5: getRandomStr(),
                            age6: getRandomStr(),
                            age7: getRandomStr(),
                            age8: getRandomStr(),
                            age9: getRandomStr(),
                            age10: getRandomStr(),
                            age11: getRandomStr(),
                            age12: getRandomStr(),
                            age13: getRandomStr(),
                            address: 'Ottawa No. 2 Lake Park',
                            date: '2016-10-04'
                        });
                    }
                    ++this.time2;
                    this.data2 = data2;
                    this.data2Loading = false;
                }, 10);
               
            },
            refresh() {
                this.data3Loading = true;
                setTimeout(() => {
                    let data3 = [];
                    for(let i = 0; i < 50; i ++) {
                        data3.push({
                            name: getRandomStr() + getRandomStr() + getRandomStr() + getRandomStr(),
                            age: getRandomStr(),
                            age2: getRandomStr(),
                            age3: getRandomStr(),
                            age4: getRandomStr(),
                            age5: getRandomStr(),
                            age6: getRandomStr(),
                            age7: getRandomStr(),
                            age8: getRandomStr(),
                            age9: getRandomStr(),
                            age10: getRandomStr(),
                            age11: getRandomStr(),
                            age12: getRandomStr(),
                            age13: getRandomStr(),
                            address: 'Ottawa No. 2 Lake Park',
                            date: '2016-10-04'
                        });
                    }
                        
                    ++ this.time;
                    this.data3 = data3;
                    this.data3Loading = false;
                    data3 = null;
                }, 10);
               
            }
        }
    }
</script>
